{% extends 'dict/base.html' %}
{% block title %}回忆单词{% endblock %}
{% block content %}
    <div><span class="bage badge-info" style="margin-top: 16px">单词回忆</span></div>
    <div id="myGrid" style="height: 600px"><!--表格 --></div>
    <div id="modal"><!--对话框 --></div>
{% endblock %}
{% block script %}
    <script>
        $('document').ready(function () {
            //custom formatter definition
            let promptIcon = function (cell, formatterParams, onRendered) {
                let v = "";
                if (cell.getValue() !== undefined)
                    v = cell.getValue();
                return "<i class='fa fa-eye' style=\"color:blue\"></i>" + v;
            };


            let answerIcon = function (cell, formatterParams, onRendered) {
                let v = "";
                if (cell.getValue() !== undefined)
                    v = cell.getValue();
                return "<i class='fa fa-shower' style=\"color:green\"></i>  " + v;
            };

            let checkIcon = function (cell, formatterParams, onRendered) {
                let a = 'lightgray';
                let b = a;
                if (cell.getValue() === '对')
                    a = 'red';
                else if (cell.getValue() === '不对')
                    b = 'red';
                return `<i class='fa fa-check' style='color:${a}'></i><i class='fa fa-close' style='color:${b}'></i>`;

            };

            let table;
            table = new Tabulator('#myGrid', {
                data: {{ data|safe }},
                columns: [
                    {title: '索引', field: 'id', width: 70},
                    {title: '单词', field: '单词', width: 100, visible: false},
                    {title: '发音', field: '发音', visible: false},
                    {title: '意思', field: '意思'},
                    // 4
                    {
                        title: '音标',
                        formatter: promptIcon,
                        cellClick: function (e, cell) {
                            //alert(cell.getData()['发音']);
                            cell.setValue(cell.getData()['发音']);
                        }
                    },
                    // 5
                    {
                        title: '单词',
                        formatter: answerIcon,
                        cellClick: function (e, cell) {
                            cell.setValue(cell.getData()['单词']);
                        }
                    },
                    // 6
                    {
                        title: '结果',
                        width: 70,
                        formatter: checkIcon,
                    },
                    {title: '默写', field: '填写', editor: 'input'},

                ],
                pagination: "local",
                paginationSize: 16,
                layout: "fitColumns",
                maxHeight: '100%',
                // cell edited callback
                cellEdited: function (cell) {
                    if (cell.getField() !== '填写') return;
                    if (cell.getValue() === 'undefined' || cell.getValue() === '') return;

                    let data = cell.getData();
                    let success = true;
                    if (data['单词'].trim() !== data['填写'].trim()) {
                        // console.log(data['单词'], data['填写']);
                        success = false;
                    }
                    // 修改状态
                    let row = cell.getRow();
                    let cells = row.getCells();
                    // 提示 2， 答案 3， 结果符号 4
                    cells[4].setValue(data['发音']);
                    cells[5].setValue(data['单词']);
                    cells[6].setValue(success === true ? '对' : '不对');

                    $.post(
                        '{% url "dict:update_word_status" %}',
                        {
                            'id': data['id'],
                            'success': success
                        },
                        function (data) {
                            console.log(data);
                        }
                    );
                },
            });
            // ready
        });
    </script>
{% endblock %}